<template>
	<view class="wrap u-p-30">
		<view class="box footprintWrap">
			<u-row class="header u-p-l-45 u-p-t-20">
				<u-col span="6">
					<view>
						<u-collapse arrow-color="#fff" style="opacity:.7">
							<u-collapse-item :open="timeShow" @change="timeShow = true">
								<view slot="title" class="u-font-12" style="color:#fff">
									个人累计减排量
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
					<view class="u-m-t-10">
						<span class="color u-m-r-10" style="font-size: 25px;" v-if="result.numberOfSteps&&(result.numberOfSteps/60).toFixed(0)>240">{{YearEnergy.energy+240}}</span>
						<span class="color u-m-r-10" style="font-size: 25px;" v-else>{{(YearEnergy.energy) + (result.numberOfSteps ? (result.numberOfSteps/60).toFixed(0): 0)}}</span>
						<span style="color:#F7F7F7">g</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="color u-font-12" style="opacity:.7">
						个人累计行走
					</view>
					<view class="u-m-t-10">
						<span class="color u-m-r-10 number">{{(YearEnergy.km) +(result.distance?(result.distance/1000).toFixed(3) : 0)}}</span>
						<span style="color:#F7F7F7" class="u-font-12">公里</span>
					</view>
				</u-col>
			</u-row>
			<view class="content u-p-l-54 u-p-t-30">
				<view>
					<view class="color u-font-12" style="opacity:.7">
						今日步数
					</view>
					<view class="u-m-t-10">
						<span class="color u-m-r-10" style="font-size: 30px;font-weight:bold;">{{result.numberOfSteps || 0}}</span>
						<span style="color:#F7F7F7" class="u-font-12">步</span>
					</view>
				</view>
				<view class="u-p-t-30">
					<u-row>
						<u-col span="4" class="u-p-0">
							<view class="color u-font-12" style="opacity:.7">
								距离
							</view>
							<view class="u-m-t-10">
								<span class="color u-m-r-10" style="font-size: 20px;">{{result.distance?(result.distance/1000).toFixed(3) : 0}}</span>
								<span style="color:#F7F7F7" class="u-font-12">公里</span>
							</view>
						</u-col>
						<u-col span="4">
							<view class="color u-font-12" style="opacity:.7">
								热量
							</view>
							<view class="u-m-t-10">
								<span class="color u-m-r-10" style="font-size: 20px;">{{result.distance ? (result.distance/16).toFixed(0) : 0}}</span>
								<span style="color:#F7F7F7" class="u-font-12">千卡</span>
							</view>
						</u-col>
						<u-col span="4">
							<view class="color u-font-12" style="opacity:.7">
								获得能量
							</view>
							<view class="u-m-t-10">
								<span class="color u-m-r-10" style="font-size: 20px;" v-if="result.numberOfSteps&&(result.numberOfSteps/60).toFixed(0)>240">240</span>
								<span class="color u-m-r-10" style="font-size: 20px;">{{result.numberOfSteps ? (result.numberOfSteps/60).toFixed(0): 0}}</span>
								<span style="color:#F7F7F7" class="u-font-12">g</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="u-p-b-60 u-m-t-60" style="color:#333333;font-weight:bold;font-size: 17px;">减排能量获取详情</view>
		<view class="contain u-p-t-50 u-p-l-20 u-p-r-20 u-p-b-30">
			<view class="u-flex" v-if="option.series[0].data.length>0">
				<u-button @click="setTime(0)" style="width:50%;border-radius: 30px 0 0 30px;height:28px;" throttle-time="0"
				 hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': timeIndex === 0}" class="custom-style">日</u-button>
				<u-button @click="setTime(1)" style="width:50%;border-radius: 0 30px 30px 0;height:28px;" throttle-time="0"
				 hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': timeIndex === 1}" class="custom-style">月</u-button>
			</view>
			<view class="map" v-if="option.series[0].data.length>0">
				<view style="width:100%;height:100%;" :prop="option" :change:prop="echarts.updateEcharts" id="echarts"
				 class="echarts"></view>
				 <view id="lineTip"></view>
			</view>
			<view v-else class="map u-text-center u-m-t-80" style="color:#999">
				暂无数据
			</view>
			<view class="bottom">
				<u-row>
					<u-col span="3"></u-col>
					<u-col span="3"></u-col>
					<u-col span="6"></u-col>
				</u-row>
			</view>
		</view>
		<u-picker v-model="timeShow" title="年份选择" mode="time" @confirm="confirmTime" :params="timeParams"></u-picker>
	</view>
</template>

<script>
	//计步器插件对象
	let StepCounter = uni.requireNativePlugin('YStep-Counter');
	export default {
		data() {
			return {
				timeShow: false,
				YearEnergy: {},
				EayEnergy: {},
				timeParams: {
					year: true
				},
				time: "",
				timeIndex: 0,
				flag: false,
				result: {},
				option: {
					grid: {
						top: 20,
						bottom: 20
					},
					tooltip: {
						trigger: "axis",
						position: ['100%', 0],
						axisPointer: {
							type: "shadow",
						},
						triggerOn: "click",
						formatter: function (value) {
							console.log(value)
							return '';
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: "#f1f1f1"
							}
						},
						axisLabel: {
							color:"#ccc"
						},
						axisLine: {
							show:false,
						},
						axisTick: {
							show:false
						},
					},
					xAxis: {
						type: 'category',
						data: [123,12,213,312],
						axisTick: {
							show:false
						},
						axisLabel: {
							color:"#ccc"
						},
						axisLine: {
							show:true,
							lineStyle: {
								color:"#ccc"
							}
						},
					},
					series: [{
							name: 'Adidas',
							type: 'line',
							data: [123,3,213,123,21,321,3],
							symbolSize: 1,
							symbol: 'circle',
							smooth: true,
							yAxisIndex: 0,
							lineStyle: {
								color: "#488EF5"
							},
							showSymbol: false,
							areaStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
												offset: 0,
												color: "rgba(0,232,254, .8)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(0,232,254, 0.1)", // 100% 处的颜色
											},
										],
										global: false,
									},
									opacity: 0.6,
								},
							},
						}
					]
				}
			}
		},
		onShow(){
			this.init()
			console.log(uni.getStorageSync("NotWorkStep"))
			let data = uni.getStorageSync("NotWorkStep")
			this.result = data
			this.sendStepData(data)
		},
		methods: {
			init() {
				this.getEayEnergy()
				this.getYear({type:2,year:""})
			},
			confirmTime(e) {
				this.time = e.year
				this.getYear({year: e.year,type:1})
			},
			sendStepData(data) {
				let params = {
					userId: uni.getStorageSync("lifeData").vuex_user.userInfo.id,
					steps: data.numberOfSteps || 0,
					type: 6,
					distance: data.distance || 0,
					km: data.km || 0,
					clockTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
				}
				//console.log(data,params)
				this.$u.api.forestPunchRecord(params).then(res => {
					//成功记录步数信息})
				})
			},
			getEayEnergy () {
				this.$u.api.eayEnergy({type: this.timeIndex+1}).then(res => {
					//console.log(res)
					let xdata = res.map(value => {
						return value.footprintData
					})
					let ydata = res.map(value => {
						return value.energy
					})
					this.option.xAxis.data = xdata
				    this.option.series[0].data = ydata
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
			getYear (params) {
				this.$u.api.yearEnergy(params).then(res => {
					//console.log(res)
					this.YearEnergy = res
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
			setTime(index) {
				this.timeIndex = index
				this.getEayEnergy()
			}
		}
	}
</script>
<script module="echarts" lang="renderjs">
	let myChart
	let myChart2
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js'
				//script.src = '/static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				this.myChart = echarts.init(document.getElementById('echarts'))
				//观测更新的数据在 view 层可以直接访问到
				this.updateEcharts()
				let _this = this
				this.myChart.on("click", function(val) {

				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (this.myChart) {
					this.myChart.setOption(this.option)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
		padding: 16px;
	}

	.box {
		//height: 270px;
		border-radius: 6px;

		.color {
			color: #fff;
		}

		.header {
			height: 180rpx;
			background: linear-gradient(90deg, #9FC6FF 0%, #488EF5 100%);
			box-shadow: 0px 6px 21px 0px rgba(159, 198, 255, 0.64);
			border-radius: 20rpx 20rpx 0 0;

			.number {
				font-size: 25px;
			}
		}

		.content {
			height: 330rpx;
			background: linear-gradient(90deg, #60B6FF 0%, #488EF5 100%);
			box-shadow: 0px 6px 21px 0px rgba(159, 198, 255, 0.64);
			border-radius: 0 0 20px 20px;
		}
	}

	.contain {
		background: #fff;
		
	}

	
	.map{
		width:100%;
		height: 200px;
		background:#fff;
		padding: 10px;
	}
	/deep/ .footprintWrap {
		.u-collapse-head {
			padding:0!important;
			.u-icon-wrap {
				position: relative;
				right: 30px;
				top:1px;
			}
		}
	}
	/deep/ .contain .activeBtn {
			background: rgba(70, 130, 255, 0.1)!important;
			color: #4683FF!important;
			border: 2px solid #4683FF!important;
		}
	#lineTip {
		display:none;
	}
</style>
